<!--
- Author:  LiShibin.
- Date:    2018/12/6.
- File:    serviceRefund.
-->
<template>
  <div>
    <div class="Topmenu"><i class="iconfont icon-youjiantou" @click="$utils.back()"><a href=""></a></i>
      <h1>选择服务类型</h1>
      <span></span>
    </div>
    <div class="f-oh mt50p" v-for="(item, index) in orderInfo">
      <div class="service_top">
        <div class="service_top_img"><img :src="$config.website + '/test.php?sign=' + index + '&image=' + item.images_1" alt=""></div>
        <div class="service_top_right">
          <p class="service_top_right_1">{{item.goods_name}}</p>
          <p class="service_top_right_2">￥{{item.goods_price}}<span>x{{item.goods_num}}</span></p>
        </div>
      </div>
      <div class="service_main">
        <ul>
          <li class="mt043r" @click="openWindow">货物状态
            <i class="iconfont icon-youjiantou-copy  fr huis" v-show="goodsStateRemark == ''"></i>
            <span class="fr" style="color: #595757;font-size: 0.51rem">{{goodsStateRemark}}</span></li>
        </ul>
        <ul>
          <li class="mt043r ">退款金额 <span class="fr hs">￥{{item.goods_price * item.goods_num}}</span></li>
        </ul>
        <p class="service_main_tuikuanshuoming">最多￥ {{item.goods_price * item.goods_num}}，含余额支付{{item.balance_amount}}</p>
        <ul>
          <li>退款说明 <input type="text" class="service_main_tuikuanshuoming_input" placeholder="选填" v-model="remark">
            <!-- <span class="fr huis">未使用余额支付</span> --></li>
        </ul>
        <ul>
          <li class="mt043r">上传凭证
            <div>
              <span v-for="(image , i) in images" @click="bingtap_preview(i)" class="service_main_upload" v-show="images != ''">
                <img :src="image.src" alt="">
              </span>
              <span class="service_main_upload" v-show="images == ''">
                <img src="" alt="">
                <image-upload
                  class="but_1 wauto"
                  ref='ImageUpload'
                  :url='url'
                  :touch-size = 1
                  :multiple = false
                  :lrz-options = {width:1024}
                  field-name = 'serverImgFile'
                  :data = {}
                  :max-count = 1
                  @chooseImages='bindtap_chooseImages'
                  style="tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:rgba(0,0,0,0);opacity: 0; z-index: 999;height: 3.5rem;margin-top: -3.3rem;"
                />
              </span>

              <!--<span class="service_main_upload"><img src="" alt=""></span>-->
              <!--<span class="service_main_upload"><img src="" alt=""></span>-->
              <!--<span class="service_main_upload mr0 "><img src="" alt=""></span>-->
            </div>
          </li>
        </ul>
        <div class="maintenance_upload_btn" @click="summit">提交</div>
      </div>
      <div class="servicebg " v-show="sign == false">
        <div class="service_refund_tc">
          <ul>
            <li>货物状态</li>
            <li @click="changeGoodsState(1)">未收到货 <i class="iconfont  icon-xuanzhong1" :class="{'on': goodsState == 0}"></i></li>
            <li @click="changeGoodsState(2)">已收到货 <i class="iconfont  icon-xuanzhong1" :class="{'on': goodsState == 1}"></i></li>
            <p class="service_refund_tc_p">
              <span class="service_refund_tc_span" @click="openWindow">关闭</span>
            </p>
          </ul>
        </div>
      </div>
    </div>
    <image-preview
      style="z-index:200"
      :images="preImages"
      v-model="index"
      :numIsShow="false"
      :deleteIsShow="false"
      @delete="bindtap_delete"
    />
  </div>
</template>

<script>
  import {ImageUpload, ImagePreview} from 'vue-image-upload-preview'
  import {MessageBox} from 'mint-ui'

  export default {
    data() {
      return {
        orderInfo: {add_list: {}, order_info: {extend_order_common: {}, extend_order_goods: {}}},
        orderData: [],
        sign: true,
        goodsState: 1000,
        goodsStateRemark: '',
        index: -1,
        images: [],
        connect: '',
        url: '',
        image64: '',
        remark: '',
        refundType: this.$route.params.refundType || 2,
        order_sn: this.$route.params.order_sn,
        modify: this.$route.params.modify || 0
      }
    },
    created() {
      this.getOrderInfo(this.$route.params.id, this.$route.params.goods_id)
    },
    components: {
      'image-preview': ImagePreview,
      'image-upload': ImageUpload
    },
    computed: {
      preImages() {
        return this.images.map(v => { return v.src })
      }
    },
    methods: {
      summit() {
        // this.$router.replace({name: 'after-sale'})
        this.image64 = this.images.map(v => { return v.src })
        console.log(this.orderInfo)
        // console.log(this.image64)
        if (this.goodsState == 1000) {
          this.$toast('请选择货物状态')
          return
        }
        MessageBox.confirm('是否确认要进行退款', {cancelButtonText: '取消', confirmButtonText: '确认'}).then(action => {
          if (this.modify == 0) {
            this.$request.addfund(this.$route.params.id, this.$route.params.goods_id, this.remark, this.goodsState, this.orderInfo[0].goods_num, this.refundType, this.image64).then(data => {
              this.$toast('操作成功')
              this.$router.replace({name: 'after-sale', params: {id: this.$route.params.id, goods_id: this.$route.params.goods_id, order_sn: this.order_sn}})
            }).catch(e => {
              this.$toast('请求失败：' + e.msg)
            })
          } else {
            this.$request.amendOrderinfo(this.$route.params.id, this.$route.params.goods_id, this.refundType, this.goodsState, this.remark, this.image64).then(data => {
              this.$toast('操作成功')
              this.$router.replace({name: 'after-sale', params: {id: this.$route.params.id, goods_id: this.$route.params.goods_id, order_sn: this.order_sn}})
            }).catch(e => {
              this.$toast('请求失败：' + e.msg)
            })
          }
        }).catch(() => {
        })
      },
      openWindow() {
        this.sign = !this.sign
      },
      changeGoodsState(state) {
        console.log(state)
        this.goodsState = state
        this.sign = true
        if (state == 1) {
          this.goodsStateRemark = '未收到货'
        } else {
          this.goodsStateRemark = '已收到货'
        }
      },
      getOrderInfo(id, goods_id) {
        this.$request.retrunindex(id, goods_id).then(data => {
          this.orderInfo = data
        }).catch(e => {
          this.$toast('获取订单明细失败:' + e.msg)
        })
      },
      bindtap_chooseImages(e) {
        /*
         * 选择成功 e是一个数组
         * e[0].file 图片文件对象，用于上传
         * e[0].src 图片base64，用于预览
         * e[0].compress 图片是否经过压缩
         */
        this.bindtap_delete()
        if (Array.isArray(e)) {
          this.images = this.images.concat(e)
          console.log(this.images.map(v => { return v.src }))
        } else {
          console.log(e)
        }
      },
      bindtap_delete(e) {
        /*
         * e 当前显示的图片的下标(双向绑定index，可以忽略e)
         * this.images 存储选择图片传过来的对象
         * this.index 双向绑定当前显示的图片的下标
         * 下面是删除的例子
         */
        this.images = this.images.filter((v, i) => {
          return this.index != i
        })
      },
      /**
       *  绑定函数 -- 预览图片
       */
      bingtap_preview(i) {
        this.index = i
      },
      /**
       *  绑定函数 -- 取消预览
       */
      bingtap_hiddenImg() {
        this.index = -1
      }
    }
  }
</script>

<style>
.on {
  color: rgba(227, 193, 67, 1)!important;
}
.upload-button input {
  width: 3.4rem;
  height: 3.4rem;
}
</style>
